<template>
  <t-dialog header="发送邮件" :visible.sync="visible" :onConfirm="onConfirm" top="12%" width="40%" :onClose="closeDialog">
    <div style="height: 25vh">
      <t-form :data="formData" :rules="rules" ref="form">
        <t-form-item requiredMark label="收件人邮箱" name="toEmail">
          <t-input v-model="formData.toEmail" placeholder="请输入邮箱"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="主题" name="subject">
          <t-input v-model="formData.subject" placeholder="请输入主题"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="正文" name="text">
          <!-- <tiny-mce-editor v-model="formData.text"></tiny-mce-editor> -->
          <!-- <t-textarea v-model="formData.text" placeholder="请输入正文" :autosize="{ minRows: 18 }" /> -->
          <t-input v-model="formData.text" placeholder="请输入正文"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="附件" name="fileIds">
          <file-upload ref="fileUpload" v-model="formData.fileIds" @success="uploadSuccess"></file-upload>
        </t-form-item>
      </t-form>
    </div>
  </t-dialog>
</template>

<script name="ExpertMailDialog">
import TinyMceEditor from "@/components/TinyMceEditor/index.vue";
import FileUpload from "@/components/FileUpload/index.vue"

import { getFiles } from "@/api/common";

export default {
  name: 'ExpertMailDialog',
  components: {
    FileUpload,
    TinyMceEditor,
  },
  props: {
    objId: {
      type: Number,
    },
    nickName: {
      type: String,
    },
  },
  data() {
    return {
      visible: true,
      dataLoading: false,
      formData: {
        toEmail: '',
        subject: '',
        text: '',
        file: {},
        fileIds: [],
      },
      rules: {
        toEmail: [
          { required: true, message: '邮箱不能为空' },
          { email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }
        ],
        subject: [
          { required: true, message: '邮件主题不能为空' },
        ],
        text: [
          { required: true, message: '邮件正文不能为空' },
        ],
        fileIds: [
          { required: true, message: '邮件附件不能为空' },
        ],
      },
    }
  },
  methods: {
    uploadSuccess(ids) {
      this.formData.file = this.$refs.fileUpload.files[0].raw;
      this.$message.success("上传成功");
    },
    onConfirm() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          let loading = false;
          const confirmDia = this.$dialog.confirm({
            header: '发送邮件提示',
            body: `是否确认为专家"${this.nickName}"发送邀请邮件？`,
            confirmBtn: {
              content: loading ? '提交中...' : '提交',
              theme: 'primary',
              loading,
            },
            theme: 'warning',
            onConfirm: ({ e }) => {
              loading = true;
              let formData = new FormData()
              formData.append("toEmail", this.formData.toEmail)
              formData.append("subject", this.formData.subject)
              formData.append("text", this.formData.text)
              formData.append("file", this.formData.file)
              this.$api.system.email.send(formData).then((response) => {
                this.$message.success('发送成功');
                this.$emit('update:visible', false);
                confirmDia.destroy();
                loading = false;
              }).catch((e) => {
                loading = false;
                this.$message.error(e.toString());
              });
            },
          });
        } else {
          const firstError = Object.values(validateResult)[0]?.[0]?.message;
          this.$message.error(firstError);
        }
      })
    },
    closeDialog() {
      this.$emit('update:visible', false);
    },
  }
}
</script>
